<template>
  <div class="about">
    <h1>This is an about page {{ id }}</h1>
    <div class="content" v-if="showA">Content A</div>
    <div class="content" v-if="showB">Content B</div>
    <router-link to="/">首页</router-link> |
    <a href="https://www.baidu.com/">Baidu</a>
  </div>
</template>

<script>
import BackBlocker from '../../../src/index';

const backBlocker = new BackBlocker();

export default {
    data() {
        return {
            showA: false,
            showB: false,
        };
    },
    computed: {
        id() {
            return this.$route.query.id;
        },
    },
    activated() {
        console.log('[About::activated] no add map');
        // backBlocker.addMap({
        //     a: this.a,
        //     b: this.b,
        // });

        backBlocker.pushStateHandler('a', this.a);
        backBlocker.pushStateHandler('b', this.b);
    },

    deactivated() {
        console.log('[About::deactivated]');
        backBlocker.dispose();
        this.reset();
    },

    beforeDestroy() {
        console.log('[About::beforeDestroy]');
    },

    methods: {
        a() {
            this.showA = true;
            this.showB = false;
        },
        b() {
            this.showA = false;
            this.showB = true;
        },
        reset() {
            this.showA = false;
            this.showB = false;
        },
    },
};
</script>

<style scoped>
.content {
    border: 1px solid red;
    padding: 10px;
}
</style>
